<template>
    <view class="flex-col homepage">
        <view class="flex-col wrapper" v-if="isopen">
            <view class="flex-row wraper-row">
                <view class="u-line-1 text">住 院 区</view>
                <view class="u-line-1 text-two" v-if="!!hospital.campus"> {{hospital.campus.campusName}}</view>
            </view>
            <u-line class="line" margin="0rpx 0rpx 28rpx 0rpx"></u-line>
            <view class="flex-row wraper-row">
                <view class="u-line-1 text">住院科室</view>
                <view class="u-line-1 text-two" v-if="!!hospital.campus"> {{hospital.divisionType.divisionName}}</view>
            </view>
            <u-line class="line" margin="0rpx 0rpx 28rpx 0rpx"></u-line>
            <view class="flex-row wraper-row-two">
                <view class="u-line-1 text">入院时间</view>
                <view class="u-line-1 text-two" > {{hospital.hospitalizedTime}}</view>
            </view>
            <u-line class="line" margin="0rpx 0rpx 28rpx 0rpx"></u-line>
            <view class="flex-row wraper-row">
                <view class="u-line-1 text">出院时间</view>
                <view class="u-line-1 text-two"> {{hospital.leavehospitalTime}}</view>
            </view>
            <u-line class="line" margin="0rpx 0rpx 28rpx 0rpx"></u-line>
            <view class="flex-row wraper-row-two">
                <view class="u-line-1 text">住院状态</view>
                <view class="u-line-1 text-two"> {{hospital.status}}</view>
            </view>
            <u-line class="line-two"></u-line>
        </view>
        <view class="flex-col wrapper-two">
            <view class="flex-row wraper-row-three">
                <view class="u-line-1 text">就 诊 人</view>
                <view class="u-line-1 text-two" v-if="!!hospital.thePatient"> {{hospital.thePatient.name}}</view>
            </view>
            <u-line class="line" margin="0rpx 0rpx 28rpx 0rpx"></u-line>
            <view class="flex-row wraper-row-four">
                <view class="u-line-1 text">证件类型</view>
                <view class="u-line-1 text-two" v-if="!!hospital.thePatient"> {{hospital.thePatient.documentType}}</view>
            </view>
            <u-line class="line" margin="0rpx 0rpx 28rpx 0rpx"></u-line>
            <view class="flex-row wraper-row-five">
                <view class="u-line-1 text">身份证号</view>
                <view class="u-line-1 text-two" v-if="!!hospital.thePatient"> {{hospital.thePatient.number}}</view>
            </view>
            <u-line class="line" margin="0rpx 0rpx 28rpx 0rpx"></u-line>
            <view class="flex-row wraper-row-six">
                <view class="u-line-1 text">手机号码</view>
                <view class="u-line-1 text-two" v-if="!!hospital.thePatient"> {{hospital.thePatient.phone}}</view>
            </view>
            <u-line class="line" margin="0rpx 0rpx 28rpx 0rpx"></u-line>
            <view class="flex-row wraper-row-seven">
                <view class="u-line-1 text">就诊卡号</view>
                <view class="u-line-1 text-two" v-if="!!hospital.thePatient"> {{hospital.thePatient.hospitalNumber}}</view>
            </view>
            <u-line class="line-two" margin="0rpx 0rpx 28rpx 0rpx"></u-line>
            <view class="flex-row wraper-row-eight" v-if="isopen">
                <view class="u-line-1 text">住 院 号</view>
                <view class="u-line-1 text-two"> {{hospital.admissionNumber}}</view>
            </view>
        </view>
		
		<u-button class="button" v-if="isPay" @click="zhuyuanchongzhi(hospital.thePatient.id)">
			住院充值
		</u-button>
	
		<u-button class="button" v-if="confirm" @click = "bindInpatient(hospital.thePatient.id)">
			确定
		</u-button>


    </view>
</template>
<script>
    export default {
        data() {
            return {
				isopen:false,
				isPay:false,
				confirm:true,
				id:'',
				URL:'http://localhost:9000/',//主域名
				hospital:{}
			}
        },
        methods: {
			
			zhuyuanchongzhi(id){
				console.log(id)
				uni.navigateTo({
					url:"../index/menzhenchongzhi?panId="+id
				})
			},
			
			//绑定住院人
			bindInpatient(id){
				console.log(id)
				// uni.request({
				// 	url:this.URL+"user/user/inpatient/bindInpatient/"+this.id,
				// 	method:"GET",
				// 	success: (res) => {
				// 		console.log(res)
				// 		if(res.data.code == 20000){
				// 			uni.showToast({
				// 				icon: "none",
				// 				title: '绑定成功',
				// 			})
				// 			//跳转页面
				// 			uni.navigateTo({
				// 				url: "hospital?id="+res.data.data.id
				// 			})
				// 		}
				// 	}
				// })
			}

        },
		onLoad(id) {
			this.id = id.id
			uni.request({
				url:this.URL+"user/user/inpatient/hospitalById/"+this.id,
				method:"GET",
				success: (res) => {
					console.log(res)
					if(res.data.code == 20000){
						this.hospital = res.data.data.hospital
						if(this.hospital.campus != null){
							this.isopen = true
							this.isPay = true
							this.confirm = false
						}
						console.log(this.hospital)
					}
				}
			})
			console.log(this.id)
		}
    }
</script>
<style lang="scss" scoped>
    /** 全局样式-开始,建议放在公共css样式文件中,比如common.css 或app.vue文件 */

    html,
    body {
        margin: 0;
        width: 100%;
        height: 100%;
        font-size: 16px
    }

    view,
    text,
    image {
        position: relative;
        box-sizing: border-box;
        flex-shrink: 0;
    }

    .flex-col {
        display: flex;
        align-items: flex-start;
        flex-direction: column;
    }

    .flex-row {
        display: flex;
        align-items: flex-start;
    }

    .flex-col .flex-row {
        width: 100%
    }

    /** 全局样式-结束*/

    .homepage {
        padding: 32rpx 30rpx 0rpx 30rpx;

        .wrapper {
            width: 678rpx;
            margin-right: auto;
            margin-bottom: 48rpx;
            margin-left: auto;
            padding: 30rpx 0rpx 38rpx 12rpx;
            border-radius: 10rpx;

            .wraper-row {
                width: 582rpx;
                justify-content: space-between;
                margin: 0rpx 0rpx 28rpx 8rpx;

                .text {
                    width: 130rpx;
                    font-size: 32rpx;
                    color: #b2bbd3;
                }

                .text-two {
                    width: 408rpx;
                    font-size: 32rpx;
                }
            }

            .line {
                width: 652rpx;
            }

            .wraper-row-two {
                width: 582rpx;
                justify-content: space-between;
                margin: 1rpx 0rpx 0rpx 8rpx;

                .text {
                    width: 130rpx;
                    font-size: 32rpx;
                    color: #b2bbd3;
                }

                .text-two {
                    width: 408rpx;
                    font-size: 32rpx;
                }
            }

            .line-two {
                width: 658rpx;
            }
        }

        .wrapper-two {
            width: 678rpx;
            margin-right: auto;
            margin-bottom: 48rpx;
            margin-left: auto;
            padding: 29rpx 0rpx 32rpx 12rpx;
            border-radius: 10rpx;

            .wraper-row-three {
                width: 568rpx;
                justify-content: space-between;
                margin: 0rpx 0rpx 28rpx 8rpx;

                .text {
                    width: 130rpx;
                    font-size: 32rpx;
                    color: #b2bbd3;
                }

                .text-two {
                    width: 408rpx;
                    font-size: 32rpx;
                }
            }

            .line {
                width: 652rpx;
            }

            .wraper-row-four {
                width: 568rpx;
                justify-content: space-between;
                margin: 0rpx 0rpx 28rpx 8rpx;

                .text {
                    width: 130rpx;
                    font-size: 32rpx;
                    color: #b2bbd3;
                }

                .text-two {
                    width: 408rpx;
                    font-size: 32rpx;
                }
            }

            .wraper-row-five {
                width: 568rpx;
                justify-content: space-between;
                margin: 0rpx 0rpx 28rpx 8rpx;

                .text {
                    width: 130rpx;
                    font-size: 32rpx;
                    color: #b2bbd3;
                }

                .text-two {
                    width: 408rpx;
                    font-size: 32rpx;
                }
            }

            .wraper-row-six {
                width: 568rpx;
                justify-content: space-between;
                margin: 0rpx 0rpx 28rpx 8rpx;

                .text {
                    width: 130rpx;
                    font-size: 32rpx;
                    color: #b2bbd3;
                }

                .text-two {
                    width: 408rpx;
                    font-size: 32rpx;
                }
            }

            .wraper-row-seven {
                width: 568rpx;
                justify-content: space-between;
                margin: 0rpx 0rpx 28rpx 8rpx;

                .text {
                    width: 130rpx;
                    font-size: 32rpx;
                    color: #b2bbd3;
                }

                .text-two {
                    width: 408rpx;
                    font-size: 32rpx;
                }
            }

            .line-two {
                width: 658rpx;
            }

            .wraper-row-eight {
                width: 568rpx;
                justify-content: space-between;
                margin: 1rpx 0rpx 0rpx 8rpx;

                .text {
                    width: 130rpx;
                    font-size: 32rpx;
                    color: #b2bbd3;
                }

                .text-two {
                    width: 408rpx;
                    font-size: 32rpx;
                }
            }
        }

        .button {
            width: 100%;
            font-size: 32rpx;
            background: #006eff;
            color: #ffffff;
        }
    }
</style>